
<script setup>
import { ref, reactive } from 'vue'
import { useCommunityList } from "@/hooks/index.js";
import { addhouseApi,gethouseInfoApi,edithouseApi } from "@/api/house.js";
import {  ElMessage } from 'element-plus'

//小区信息
const cateList=useCommunityList()
//标题
const title = computed(()=>{
 return formData.id ? '修改':'新增'
})
// ============================
// 子组件数据添加或修改后要给父亲
const emit = defineEmits(["updateList"])
// ==============================
// 表单数据
const defaultState = {
  id:null,
  community_code: "",//所属小区
  desc: "",//描述
  house: 0,//总户数
  lift: 0,//电梯数
  name:''//栋数名称
}

const formData = reactive({ ...defaultState });
// 验证规则
const formRules = {
  desc: [{ required: true, message: "请输入", trigger: "blur" }],
  house: [{ required: true, message: "请输入", trigger: "blur" }],
  lift: [{ required: true, message: "请输入", trigger: "blur" }],
  name: [{ required: true, message: "请输入", trigger: "blur" }],

};
// 表单ref引用
const formRef = ref();
// 抽屉打开
const isShow = ref(false)
// const direction = ref('rtl')
const closeHandler = () => {
   // 移除校验
   formRef.value.resetFields()
  // 重置表单数据
  Object.assign(formData,{...defaultState})
};
// 表单提交
const onSubmit = async () => {
  try {
    // 1. 校验数据
    await formRef.value.validate();
    // 2. 整理数据
    // 3. 提交数据
    const data = toRaw(formData);
   formData.id?await edithouseApi(data): await addhouseApi(data)
   
    ElMessage.success("操作成功");
    // 5. 关闭
    isShow.value = false;
    // 6. 列表更新
    emit("updateList");   
  } catch (error) {
    console.log(error);
  }
};
//关闭抽屉
const close = ()=>{
  isShow.value = false
  // 移除校验
  formRef.value.resetFields()
  // 重置表单数据
  Object.assign(formData, { ...defaultState })
}
// 数据回显
const replyData = async(id) =>{
  let res = await gethouseInfoApi(id)
  Object.assign(formData,res.data)
  isShow.value = true
}

defineExpose({
  replyData,
  isShow
});


const handleChange = (value) => {
  formData.lift=value
}

const houseChange = (value) => {
  formData.house=value
}
</script>

<template>
  <el-drawer :title="title" v-model="isShow" @close="closeHandler"  size="50%">
    <template #title>
    </template>
    <template #default>
      <el-form :model="formData" label-position="top" :rules="formRules" ref="formRef" label-width="120px"
        :inline="false">
        <el-row>
          <el-col :span="10">
            <el-form-item label="所属小区" prop="community_code">
              <el-select v-model="formData.community_code" size="large" >
                    <el-option v-for="item in cateList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.code"
                        >
                    </el-option>
                    </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="栋数名称" prop="name">
              <el-input v-model="formData.name" size="large"  placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="电梯数" prop="lift">

              <el-input-number
                  v-model="formData.lift"
                  controls-position="right"
                  size="large"
                  @change="handleChange"
                />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="总户数" prop="house">
              <el-input-number
                  v-model="formData.house"
                  controls-position="right"
                  placeholder="请输入"
                  size="large"
                  @change="houseChange"
                />
              
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="描述" prop="desc">
              <el-input v-model="formData.desc" size="large" type="textarea" :rows="4" placeholder="请输入"></el-input>

            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item >
              <el-button type="primary" @click="onSubmit">提交</el-button>
              <el-button @click="close">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    
  </el-drawer>
</template>

<style scoped>
::v-deep .el-form-item__content {
  display: block;
  margin-left: 20px;
}

::v-deep .ql-editor {
  height: 200px;
}
</style>